<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二题</title>
    <script src="../tool/vue.js"></script>
    <script src="../tool/axios.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script> -->

</head>

<body id="home">
    <!-- <h3>作业2：使用axios请求第三方接口（https://alapi.cn/）— 新闻资讯类相关，题材不限，实现数据的页面渲染展示，通过按钮修改页面主题样式（阅读模式、护眼模式）</h3> -->

    <!-- 表格 -->
    <div id="app">
        <!-- 按钮换主题 -->
        <button type="button" class="btn btn-lg btn-primary" v-on:click="readbook">阅读模式</button>
        <button type="button" class="btn btn-default btn-lg" v-on:click="huyan">护眼模式</button>
        <br>
        <table class="table table-hover" id="t3">
            <tr>
                <th>省份代码</th>
                <th>省份</th>
                <th>级别</th>
            </tr>
            <tr v-for="(item, index) in tabalData" :key="index">
                <td>{{item.code}}</td>
                <td>{{item.name}}</td>
                <td>{{item.key}}</td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                tabalData: [],
            },
            methods: {
                init() {
                    axios.post("https://v2.alapi.cn/api/springTravel/risk/city", { token: "dSHCVWXdvINeg7Qj" }).then(res => {
                        console.log(res);
                        this.tabalData = res.data.data;
                    })
                },
                readbook() {
                    document.body.style.backgroundColor = "wheat";
                    document.getElementById("t3").style.color = "black";


                },
                huyan() {
                    document.body.style.backgroundColor = "black";
                    document.getElementById("t3").style.color = "white";



                }
            },
            created() {
                this.init();
            }
        })

    </script>
</body>

</html>